<template>
  <div class="">
    <div
      class="container"
      style="display: flex;flex-direction: column;width: 100%;height: 85vh;justify-content: center;"
    >
      <div>
        <div class="safe-content">
          <div>名称：</div>
          <div v-html="row.safe_name?row.safe_name:'未定义'" />
        </div>
        <div class="safe-content">
          <div>安全级别：</div>
          <div
            style="flex: 1;text-align: left;"
            v-html="row.grade_id?row.grade_id:'未开启'"
          />
        </div>
        <div class="safe-content">
          <div>说明：</div>
          <div v-html="row.grade_content" />
        </div>
        <div class="safe-content">
          <div>超级管理员id：</div>
          <div v-text="row.user_id?row.user_id:'未定义'" />
        </div>
        <div class="safe-content">
          <div>缓存时间秒：</div>
          <div v-html="row.cache_time?row.cache_time:'不缓存'" />
        </div>
        <div class="safe-content">
          <div>更新时间：</div>
          <div>{{ formatDate(row.update_time) }}</div>
        </div>
        <el-button
          v-if="!isTrashed"
          type="primary"
          plain
          style="font-size: 25px;"
          size="max"
          icon="el-icon-edit"
          @click="handleEdit('edit', row)"
        >
          编辑
        </el-button>
      </div>
    </div>

    <!-- 公共form表单弹出框 -->
    <el-dialog
      :title="action=='add'?'添加功能接口':'修改功能接口'"
      :visible.sync="editVisible"
      width="40%"
    >
      <div
        class="form-box"
        style="align-self: center;"
      >
        <el-form
          ref="form"
          :model="form"
          label-width="160px"
        >
          <div v-if="!userInfoShow">
            <el-form-item label="ID">
              <el-input
                disabled
                :value="form.id"
              />
            </el-form-item>
            <el-form-item label="拦截级别">
              <el-select
                style=" width:100%"
                v-model="form.grade_id"
                placeholder="请选择"
              >
                <el-option
                  :key="item.id"
                  v-for="item in grade"
                  :label="item.name"
                  :value="item.id"
                >
                  <span style="float: left">{{ item.name }}</span>
                  <span style="float: right; color: #8492a6; font-size: 13px">{{ item.id }}</span>
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="缓存时间">
              <el-input
                placeholder="单位秒"
                v-model="form.cache_time"
              />
            </el-form-item>
            <el-form-item label="不拦截的用户id">
              <div>
                <el-input
                  disabled
                  placeholder="该用户不受拦截限制,一般用于超级管理员"
                  v-model="form.user_id"
                >
                  <el-button
                    slot="append"
                    icon="el-icon-search"
                    @click="userInfoShow=true"
                  >
                    查找
                  </el-button>
                </el-input>
              </div>
            </el-form-item>


            <el-form-item>
              <el-button
                type="primary"
                @click="onSubmit('form')"
              >
                提交
              </el-button>
              <el-button @click="editVisible=false">
                取消
              </el-button>
            </el-form-item>
          </div>
          <div v-else>
            <el-form-item label-width="0">
              <div style="display: flex;flex-direction: row;flex-wrap:nowrap ">
                <el-input
                  style=""
                  v-model="form.username"
                  placeholder="请输入用户登陆名-—然后点击查找"
                />
                <el-button
                  type="primary"
                  icon="el-icon-search"
                  @click="search"
                >
                  查找
                </el-button>
              </div>
            </el-form-item>
            <el-button
              type="text"
              style="width: 100%;"
              @click="userInfoShow=false"
            >
              为您查寻到<span class="el-icon-error" />
            </el-button>
            <div
              v-for="(item,index) in userInfo"
              :key="index"
            >
              <el-form-item
                :label="'ID:'+item.id"
                v-if="formPageShow(index,formPage)"
              >
                <div style="display: flex;flex-direction: row;flex-wrap:nowrap ">
                  <el-input
                    disabled
                    style=""
                    v-model="item.nickname"
                    placeholder="请输入用户登陆名-—然后点击查找"
                  />
                  <el-button
                    type="primary"
                    icon="el-icon-circle-plus-outline"
                    @click="form.user_id=item.id,userInfoShow=false"
                    plain
                  >
                    添加
                  </el-button>
                </div>
              </el-form-item>
            </div>

            <el-pagination
              background
              layout="prev, pager, next"
              :page-size="10"
              @current-change="fromCurrentChange"
              :total="userInfo.length"
            />
            <!-- <el-button  @click="userInfoShow=false" style="width: 100%;">关闭搜索框<span  class="el-icon-error"></span></el-button> -->
          </div>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>
<style>
    .safe-content {
        align-items: center;
        display: flex;
        justify-content: center;
        padding: 10px;
        font-size: 30px;
        padding: 20px;
    }

    .safe-content div {
        flex: 1;
    }

    .safe-content div:last-child {
        text-align: left;
    }

    .safe-content div:first-child {
        text-align: right;
    }
</style>
<script>
    import Request from "../../request/index.js"
    import yc from "yc-js";
    var Time =yc.Time;
    export default {
        name: 'AdminList',
        data() {
            return {
                action: 'add',
                grade: [],
                tableData: [],
                isTrashed: 0,
                editVisible: false, //编辑
                form: {
                    id: '',
                    grade_id: '',
                    user_id: '',
                    cache_time: ''
                },
                userAll: [],
                formPage: 1, //from搜索用户列表页码
                formPageNum: 10,
                userInfoShow: false
            }
        },
        created() {
            this.getGrade();
            this.getData();
        },
        watch: {
            formPage(e) {
                this.formPageNum = (e - 1) * 10;
            }
        },
        computed: {
            userInfo: {
                get() {
                    return this.userAll;
                },
                set(e) {
                    this.userInfoShow = e;
                }
            },
            row: {
                get() {
                    return this.tableData;
                }
            }
        },
        methods: {
            formPageShow(index, page) {
               
                var p = (page - 1) * 10;
                if (index >= p && index < (p + 10)) {
                    return true;
                }
                return false;
            },
            fromCurrentChange(e) {
                this.formPage = e;
                // console.log(e);
            },
            search() {
                this.userInfo = {};
                var time = Date.now() / 1000;
                var username = {
                    username: this.form.username,
                    start_time: parseInt(time) - 3153600000
                };
                Request.get('UserList', {
                        params: username
                    })
                    .then((res) => {
                        // var data=res.data.data
                        if (res.data.code == 200) {
                            // var tableData=this.tableData;
                            this.userAll = res.data.data;
                        } else {
                            this.$notify({
                                title: '警告',
                                message: '操作失败' + res.data.message,
                                type: 'warning'
                            });
                        }
                        // console.log(res.data);


                    })
            },
            // 获取服务器权限列表
            getGrade() {
                Request.get('SystemSafeGrade_List')
                    .then((res) => {
                        // console.log(res)
                        if (res.data.code != 200) {
                            this.$notify({
                                title: '警告',
                                message: res.data.message,
                                type: 'warning'
                            });
                        } else {
                            // console.log(res.data);
                            var grade = res.data.data;
                            this.grade = grade;
                        }
                    })
                // this.province=Province;
            },
            trashed(e) {
                this.isTrashed = e;
                this.getData();
            },
            formatDate(val) {
                // 时间转换
                if (val) {
                    return Time.formatDate(val, 'yyyy-MM-dd')
                }
                return val;
            },
            // 向服务器发送请求获取 数据
            getData() {
                var isTrashed = this.isTrashed;
                Request.get('SystemSafe_Detail', {
                        params: {
                            trashed: isTrashed
                        }
                    })
                    .then((res) => {
                        this.tableData = res.data.data;

                    })
            },
            handleEdit(type, row) {
                this.action = type;
                this.editVisible = true;
                this.formTitle = '修改';
                var form = this.form;
                for (let i in form) {
                    if (row[i]) {
                        form[i] = row[i]
                    }
                }
                this.form = form;
                // this.row = row;
                // Object.assign(this.form,row)

            },
            onSubmit(formName) {

                var formUp = {};
                for (let p in this.form) {
                    if (this.form[p] && this.row[p] != this.form[p]) {
                        formUp[p] = this.form[p]
                    }
                }
                var url = 'SystemSafe_Update';
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        Request(url, {
                                data: {
                                    id: this.row.id,
                                    form: formUp
                                }
                            })
                            .then(res => {
                                let rt = res.data;

                                if (rt.code == 200) {
                                    this.$notify({
                                        title: this.formTitle + '成功',
                                        type: 'success'
                                    });
                                    var grade = this.grade;
                                        if (this.row.id == this.form.id) {
                                            for (let i in grade) {
                                                if (grade[i].id == this.row.grade_id) {
                                                    this.form.grade_name = grade[i].name;
                                                    this.form.grade_content = grade[i].content;
                                                }
                                            }
                                          Object.assign(this.row, this.form);
                                        }

                                    this.editVisible = false;
                                } else {
                                    this.$notify({
                                        title: '警告',
                                        message: '操作失败' + res.data.message,
                                        type: 'warning'
                                    });
                                }

                            })
                    } else {
                        return false;
                    }
                });

            }
        }
    }
</script>
